<template>
	<view class="container bg-white w-100 h-100">
		
		<view style="padding-bottom: 220rpx;">
			
			<view class="balance-info d-flex justify-content-between">
				<view class="flex-fill d-flex flex-column align-items-between justify-content-between">
					<view class="ye f5">{{  isLogin ? member.balance : '***' }}</view>
					<view class="ye-jy">
						<view class="font-size-sm ye">我的余额（元）</view>
						<view class="font-size-sm ye" @click="flow">余额明细</view>
					</view>
				</view>
			</view>
			
			<view class="font-size-lg text-color-base prices"></view>
			
			<view class="d-flex flex-wrap justify-content-between amounts">
				<view class="d-flex align-items-center justify-content-between amount"
v-for="(item, index) in amounts" :key="index">
					<view class="font-size-extra-lg m1 font-weight-bold">￥{{ item.value }}</view>
					<view class="desc font-weight-bold">
						{{item.name}}
					</view>
					<view class="rad">
						<radio value="r1" :checked="item.selected" color="#f03e3e" @tap="handleSelected(index)"/>
					</view>
				</view>
			</view>
			
			<template v-if="rechargeCard && rechargeCard.type == 2 && rechargeCard.coupon_names">
				<view class="font-size-lg text-color-base  fonts">赠送优惠券</view>
				<view class="pre-line box" v-for="(item, i) in rechargeCard.coupon_names" :key="i">
					{{ item }} x1
				</view>
			</template>
			
			<template v-if="rechargeCard">
				<view class="font-size-lg text-color-base fonts mt-30">使用说明</view>
				<view class="pre-line font-size-sm box">
					{{ rechargeCard.desc }}
				</view>
			</template>
			
			<!-- bottom box begin -->
			<view class="bottom-box position-fixed fixed-bottom w-100 d-flex flex-column bg-white">
				<view class="protocol d-flex justify-content-start align-items-center">
					<view class="iconfont line-height-100"  @tap="agree = !agree"
						:class="{'iconradio-button-on text-color-primary': agree, 'iconradio-button-off text-color-base': !agree}"></view>
					<view class="text-color-base">我已阅读并同意</view>
					<view class="text-color-primary" @tap="goPayInfo">《预付款协议》</view>
				</view>
				<button type="primary" class="b" v-if="!agree" disabled="">购买</button>
				<button type="primary" class="b" v-else @click="pay()">购买</button>
			</view>
			<!-- bottom box end -->
			
		</view>
		
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import {mapState, mapGetters} from 'vuex'
	export default {
		data() {
			return {
				agree: false,
				amounts: [],
				id:''
			}
		},
		async onLoad() {
			//请求充值
			this.$http.get('/recharge/recharge', '').then(res => {
				// console.log(res)
				this.amounts = res.data.data
				this.handleSelected(0)
			}).catch(err => {
			
			})
			// this.amounts = await this.$api('rechargeCards')
		},
		computed: {
			...mapState(['member']),
			...mapGetters(['isLogin']),
			rechargeCard() {
				return this.amounts.find(item => item.selected) || ''
			}
		},
		onShareAppMessage(res) {
			// console.log(this.shareGood)
			return {
				title: '充值送套餐',
				path: '/pages/balance/balance',
				imageUrl: this.$baseUrl+'/img/cz.png'
			}
		},
		onShareTimeline(res) {
			return {
				title: '充值送套餐',
				path: '/pages/balance/balance',
				imageUrl: this.$baseUrl+'/img/cz.png'
			}
		},
		methods: {
			...mapMutations(['SET_MEMBER']),
			handleSelected(index) {
				this.amounts.forEach(item => this.$set(item, 'selected', false))
				this.$set(this.amounts[index], 'selected', true)
				console.log(this.amounts[index])
				this.id = this.amounts[index].id
			},
			pay(){
				let id = this.id
				if(!this.isLogin) {
					this.login()
					return
				}
				this.$http.post('/recharge/payOrder', {id:id}).then(res => { //接口请求
					let result = res.data.data //接口返回数据
						// console.log(result)
					// console.log(reson.provider[0])
					uni.showLoading({}) //拉起支付加载提示
					if (res.statusCode == 200) {
						uni.hideLoading()
						uni.requestPayment({
							provider: result.provider,
							timeStamp: result.timeStamp,
							nonceStr: result.nonceStr,
							package: result.package,
							signType:  result.signType,
							paySign:  result.paySign,
							success: () => {
								this.$http.post('/user', '').then(res => {
									console.log(res,res.data.code)
									if(res.data.code != 401){
										// console.log('支付成功')
										this.SET_MEMBER(res.data.data)
										// console.log('返回上一级')
										uni.navigateBack({})
									}
								}).catch(err => {
								
								})
							},
							fail: function (err) {
								// uni.switchTab({
								// 	url:'/pages/mine/mine'
								// })
								// console.log('fail:' + JSON.stringify(err));
							},complete(res) {
								// console.log('complete:' + JSON.stringify(res));
							}
						});
					}
				})
				console.log(id,'pay')
			},
			flow(){
				uni.navigateTo({
					url:"/pages/balance/flow"
				})
			},
			goPayInfo(){
				uni.navigateTo({
					url:"/pages/balance/pay_info"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	padding: 0 40rpx;
}

.balance-info {
	padding: 50rpx 20rpx;
	border-radius: 20rpx;
	margin-top: 30rpx;
	background-color: #f8f9fa;
	
	.ye{
		margin: 0 auto;
	}
	
	.f5{
		font-size: 50rpx;
	}
	
	.ye-jy{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	
	view {
		height: calc(366 / 638 * 340);
		padding: 10rpx 10rpx;
	}
}

.amounts {
	margin-bottom: 40rpx;
	
	.desc{
		color: #f03e3e;
		font-size: 30rpx;
	}
	
	.m1{
		margin-left: 10rpx;
	}
	
	.amount {
		width: 100%;
		padding: 50rpx 0;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		border: 1px solid #ced4da;
		
		.rad{
			margin-right: 10rpx;
		}
	}
}

.bottom-box {
	padding: 0 40rpx;
	box-shadow: 0 0 20rpx rgba(6, 6, 6, 0.1);
	
	.protocol {
		padding: 36rpx 0;
		height: 100rpx;
		view {
			margin-right: 10rpx;
		}
	}
	
	button {
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 50rem !important;
		margin-bottom: 30rpx;
	}
}

.prices{
	margin-bottom: 20rpx;
	margin-top: 80rpx;
}

.fonts{
	margin-bottom: 20rpx;
	letter-spacing: 1rpx;
}

.box {
	background-color: #f8f9fa;
	border-radius: 10rpx;
	padding: 20rpx;
}
</style>
